<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>积分商城</title>
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

</head>
<body style="background-color: #f4f4f4 !important;">

<div style="margin: 0 auto; max-width: 1920px; background-color: #fff; padding: 10px 0;">
	<form class="layui-form" id="id_form" method="post" action="/api/inter/tmOrder/commit">
		<input type="hidden" name="goodsId" th:value="${dto.id}">
	    <div class="layui-row">
		    <div class="layui-col-md12">
		        <div class="layui-form-item" style="margin-top: 5px;">
		            <div class="layui-inline">
		                <label class="layui-form-label">剩余学分：</label>
		                <div class="layui-input-inline" style="text-align: center; width: 100px; padding: 10px 0px;">
		                    <span>[[${dto.point}]]</span>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="layui-col-md12">
		        <div class="layui-form-item" style="margin-top: 5px;">
		            <div class="layui-inline">
		                <label class="layui-form-label">单价：</label>
		                <div class="layui-input-inline" style="text-align: center; width: 50px;">
		                    <input type="number" class="layui-input layui-disabled" style="text-align: center; width: 100px;" id="id_salePrice" th:value="${dto.salePrice}" name="amount" autocomplete="off" readonly lay-verify="required"/>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="layui-col-md12">
		        <div class="layui-form-item" style="margin-top: 5px;">
		            <div class="layui-inline" style="display: flex;">
		                <label class="layui-form-label"><span style="color: red">*</span>选择数量：</label>
		                <div class="layui-form-mid">
		                	<i class="layui-icon layui-icon-reduce-circle" style="position: relative;" onclick="changeNum('reduce')"></i>
		                </div>
		                <div class="layui-input-inline" style="text-align: center; width: 50px;">
		                    <input type="number" class="layui-input" style="text-align: center; width: 50px;" id="id_num" name="num" value="1" autocomplete="off" readonly lay-verify="required"/>
		                </div>
		                <div class="layui-form-mid">
		                    <i class="layui-icon layui-icon-add-circle" style="position: relative;" onclick="changeNum('add')"></i>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="layui-col-md12">
		        <div class="layui-form-item" style="margin-top: 5px;">
		            <div class="layui-inline" style="display: flex;">
		                <label class="layui-form-label">所需学分：</label>
		                <div class="layui-input-inline" style="text-align: center; width: 100px;">
		                    <input type="number" class="layui-input" style="text-align: center; width: 100px;" id="id_amount" th:value="${dto.salePrice}" name="amount" autocomplete="off" readonly lay-verify="required"/>
		                </div>
		            </div>
		        </div>
		    </div>
	    </div>
			
		<div class="layui-form-item" style="text-align: center;">
			<div class="layui-col-md12">
				<button type="button" class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
			</div>
		</div>
	</form>
</div>
<script>
function changeNum(type) {
	var salePrice = parseFloat($('#id_salePrice').val());
	var num = parseInt($('#id_num').val());
	if(type == 'add') {
		num = num + 1;
		$('#id_num').val(num);
	} else {
		if(num <= 1) {
			layer.msg('数量不能少于1');
			return;
		}
		num = num - 1;
		$('#id_num').val(num);
	}
	$('#id_amount').val(num * salePrice);
}
</script>
<script>
$(function () {
	layui.use(['form'], function(){
		var form = layui.form;
		
		// 表单提交，共用同一个
		form.on('submit(formSubmit)', function(data){
			var indexOfLoading = layer.load(1, {
				shade: [0.5,'#000000'] //0.1透明度的白色背景
			});
			$.post(data.form.action, $('#id_form').serialize(), function(res){
				if (res.code == 0) {
					layer.msg(res.msg);
					layer.close(indexOfLoading);
					setTimeout(function(){
						layer.closeAll();
					}, 1000);
				} else {
					layer.close(indexOfLoading);
					layer.msg(res.msg);
				}
			});
			return false;
		});
	});
});
</script>
</body>
</html>